{% load static %}
{% load i18n %}

<!doctype html>
{% get_current_language as LANGUAGE_CODE %}
{% get_language_info for LANGUAGE_CODE as local_language %}
<html lang="{{ local_language.code }}">
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-176129427-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());
        gtag('config', 'UA-176129427-1', {'anonymize_ip': true});
    </script>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ASCII-Generator -
        {% block page_title %}{% translate 'Convert image or text to the ASCII Art 🎨' %}{% endblock %}</title>
    <meta name="description"
          content="{% translate 'Generate ASCII or Unicode symbols art out of any image or text. Compare the input image to the final art and download it as a picture. 300+ fonts are available.' %}">
    <meta name="author" content="Herman Schechkin (hermanTenuki)">
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Ubuntu:wght@400;500&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}?9" type="text/css">
    <link rel="stylesheet" href="{% static 'css/circle_loader.css' %}?1" type="text/css">
    <link rel="stylesheet" href="{% static 'css/media.css' %}?6" type="text/css">
</head>
<body>
<div id="borders-dashed">
    <div class="header_and_main_together">
    {% if request.user.is_authenticated and request.user.is_staff %}<a href="/staff/admin/" style="position: fixed; font-size: 12px">Admin</a><a href="{% url 'staff_logout_url' %}" style="position: fixed; font-size: 12px; left: 50px">Logout</a>{% endif %}
        <header>
            <div class="mobile-menu-btn">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <nav class="mobile-menu">
                <ul>
                    {% comment %}Translators: word "Page" can be thrown off if it sounds better on your language{% endcomment %}
                    <li><a href="{% url 'index_page_url' %}">{% translate 'Main Page' %}</a></li>
                    <li><a href="{% url 'about_url' %}">{% translate 'About' %}</a></li>
                    <li><a href="{% url 'feedback_url' %}">{% translate 'Feedback' %}</a></li>
                    <li><a href="{% url 'policy_privacy_url' %}">{% translate 'Privacy Policy' %}</a></li>
                    <li><a href="{% url 'policy_cookie_url' %}">{% translate 'Cookie Policy' %}</a></li>
                </ul>
            </nav>
            <div class="wrapper">
                <div class="logo"><a href="{% url 'index_page_url' %}">ASCII-Generator</a></div>
                <div class="switcher">
                    {% if app_page %}
                        <div class="element"><p class="img2ascii {% if not app_txt_mode %}chosen{% endif %}">{% translate 'Image to ASCII' %}</p></div>
                        <div class="element"><p class="txt2ascii {% if app_txt_mode %}chosen{% endif %}">{% translate 'Text to ASCII' %}</p>
                        </div>
                    {% else %}
                        <div class="element">
                            <p class="img2ascii">
                                <a href="{% url 'index_page_url' %}">{% translate 'Image to ASCII' %}</a>
                            </p>
                        </div>
                        <div class="element">
                            <p class="txt2ascii">
                                <a href="{% url 'index_txt_page_url' %}">{% translate 'Text to ASCII' %}</a>
                            </p>
                        </div>
                    {% endif %}
                </div>
                <div class="links">
                    <a href="{% url 'about_url' %}" class="a_underline_animation">
                        {% comment %}Translators: Link to About page (like about us){% endcomment %}
                        {% translate 'About' %}</a>
                    {#                <a href="">Examples</a>#}
                    <a href="{% url 'feedback_url' %}" class="a_underline_animation">{% translate 'Feedback' %}</a>
                </div>
            </div>
        </header>
        <main>
            {% block content %}

            {% endblock %}
        </main>
    </div>
    <footer>
        <div class="wrapper">
            <div class="policy">
                <a href="{% url 'policy_privacy_url' %}" class="a_underline_animation_small">{% translate 'Privacy Policy' %}</a>
            </div>
            <div class="GitHub">
                <a href="https://github.com/hermanTenuki/ASCII-Generator.site" title="{% translate 'Please, star us on GitHub' %}" class="a_underline_animation_small"><img
                        src="{% static 'svg/star.svg' %}" alt="" class="">GitHub</a>
            </div>
            {#            <div class="policy" style="text-align: right">#}
            {#                <a href="{% url 'policy_cookie_url' %}">{% translate 'Cookie Policy' %}</a>#}
            {#            </div>#}
            <div class="language-switcher">
                <form action="{% url 'set_language' %}" method="POST" id="language-form">
                    {% get_current_language as LANGUAGE_CODE %}
                    {% get_language_info for LANGUAGE_CODE as local_language %}
                    {% get_available_languages as LANGUAGES %}
                    {% get_language_info_list for LANGUAGES as languages %}

                    {% csrf_token %}
                    <input type="text" id="language-input" name="language" value="{{ local_language.code }}" class="hide" style="display: none">

                    <div class="language-switcher-window hide">
                        <ul>

                            {% for language in languages %}
                                <li><span data-language="{{ language.code }}">{{ language.name_local }} ({{ language.code }})</span></li>
                            {% endfor %}

                        </ul>
                    </div>
                    <p class="lang">{{ local_language.code }} <img src="{% static 'svg/chevron.svg' %}" alt=""></p>
                </form>
            </div>
        </div>
    </footer>
</div>
<div class="agreements hide">
    <div class="wrapper">
        <div class="inline_grid">
            <div class="text">
                <p class="upper-text">{% translate 'Welcome! That’s our User agreement and it is important.' %}</p>
                {% url 'policy_privacy_url' as URL_policy_privacy_url %}
                {% url 'policy_cookie_url' as URL_policy_cookie_url %}

                <p class="bottom-text">
                    {% translate 'I Agree' as I_Agree %}
                    {% blocktranslate with class_underline_anim='class="a_underline_animation_primary"' %}By clicking the «<strong>{{ I_Agree }}</strong>» button, you give consent to <a href="{{ URL_policy_privacy_url }}" {{ class_underline_anim }}>our privacy policy</a> and <a href="{{ URL_policy_cookie_url }}" {{ class_underline_anim }}>our use of cookies</a> stored in your browser.{% endblocktranslate %}
                </p>
            </div>
            <div class="btn">
                <input type="button" class="btn_1" value="{% translate 'I Agree' %}">
            </div>
        </div>
    </div>
</div>
<script src='https://js.sentry-cdn.com/7accc7e7770a40588232546c5967b572.min.js' crossorigin="anonymous" data-lazy="no"></script>
<script src="{% static 'js/jquery-3.5.1.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/js.cookie.js' %}" type="text/javascript"></script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="{% url 'javascript-catalog' %}"></script>
<script type="text/javascript">
    {% get_current_language as LANGUAGE_CODE %}
    {% get_language_info for LANGUAGE_CODE as local_language %}
    const local_language_code_i18n = "{{ local_language.code }}";
</script>
{% block body_end_before_scripts %}{% endblock %}
<script src="{% static 'js/scripts.js' %}?9" type="text/javascript"></script>
{% block body_end %}{% endblock %}
</body>
</html>